<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <div id="demo">
      <button @click="show = !show">
        Toggle
      </button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>

    <Item>
      <p v-if="show">pitem</p>
    </Item>

    <Animated>
      <p v-if="show">animate</p>
    </Animated>

    <Loading></Loading>
    <router-view/>
  </div>
</template>
<script>
import Item from './components/Item'
import Animated from './components/Animate'

export default {
  components:{
    Item,Animated
  },
  name:"App",
  data() {
    return {
      show:false
    }
  },
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.test{
  width: 150px;
  height: 75px;
  background: red;
}
</style>
